<template>
    <div class="approval">
        <div class="tops">
            <div class="header">
                <Breadcrumbs />
                <h3>
                    住户详情
                </h3>
            </div>
        </div>
        <div class="steps">
            审核流程
            <el-steps :space="600" :active="1" finish-status="success">
                <el-step title="提交住户信息" />
                <el-step title="物业审核" />
                <el-step title="认证通过" />
            </el-steps>
        </div>
        <div class="details">
            <div>
                基础资料
            </div>
            <div class="content">
                <div class="names">住户姓名：曲丽丽</div>
                <div class="types">住户编号：2022010899988</div>
                <div class="phone">手机号码：18890900900</div>
            </div>
            <div class="content">
                <div class="names">住户性别：女</div>
                <div class="types">证件类型：身份证</div>
                <div class="phone">证件号码：371689199609090456</div>
            </div>
            <div class="content">
                <div class="names">住户类型：业主</div>
                <div class="types">备注：无</div>
                <div class="phone">住户来源：小程序注册</div>
            </div>
            <div class="content">
                <div class="names">提交审核时间：2019-09-09 10：40</div>
                <div class="types">注册时间：2019-09-09 10：40</div>
                <!-- <div class="phone">手机号码：18890900900</div> -->
            </div>
            <div class="content">
                <div class="names" style="display: flex;margin-right: 100px">
                    <div style="width: 150px;">身份证正面照</div>
                    <div class="box"></div>
                </div>
                <div class="types" style="display: flex;">
                    <div style="width: 150px;">身份证正面照</div>
                    <div class="box"></div>
                </div>
            </div>
        </div>
        <div class="tags">
            <div>
                住户标签
                <span class="editbiaoqian" @click="counter.flagshow = true">编辑标签</span>
            </div>
            <div class="Btn">
                <button v-for="item in tagslist" :key="item.id" v-show="item.checked">{{ item.name }}</button>
            </div>
        </div>
        <div class="shenhe">
            <div>
                审核
            </div>
            <div style="display: flex;margin-top: 40px;">
                <div style="font-size: 14px;margin-right: 10px">
                    审核意见
                </div>
                <div class="inputs">
                    <input type="text" name="" id="" placeholder="请输入" style="border: none;" />
                </div>
            </div>
            <div class="Btns">
                <el-button type="primary" @click="enterok">审核通过</el-button>
                <el-button type="danger" @click="enterok">审核不通过</el-button>
                <el-button @click="router.go(-1)">返回</el-button>
            </div>
        </div>
        <Alerts Tips="编辑标签">
            <div class="Alerts">
                <div :class="item.checked ? 'item' : ''" v-for="item in tagslist" :key="item.id"
                    style="cursor: pointer;" @click="tabActive(item.id)">{{ item.name }}</div>
            </div>
            <div class="Btns">
                <el-button @click="counter.flagshow = false">
                    取消
                </el-button>
                <el-button type="primary" @click="counter.flagshow = false">
                    确认
                </el-button>
            </div>
        </Alerts>
    </div>
</template>

<script setup lang="ts">
import Breadcrumbs from '@/components/Breadcrumb.vue';
import Alerts from '@/components/Alerts.vue'
import { useCounterStore } from '@/stores/counter'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const counter = useCounterStore()

const tagslist: any = ref([
    {
        id: 1,
        name: '标签一',
        checked: true
    },
    {
        id: 2,
        name: '标签二',
        checked: true
    },
    {
        id: 3,
        name: '标签三',
        checked: false
    },
    {
        id: 4,
        name: '标签四',
        checked: false
    },
    {
        id: 5,
        name: '标签五',
        checked: false
    }
])
const tabActive = (id: number) => {
    tagslist.value.forEach((item: any) => {
        if (item.id == id) {
            item.checked = !item.checked
        }
    })
}
const enterok = () => {
    ElMessage({
        message: '审核成功',
        type: 'success',
        duration: 1000,
        onClose: () => {
            router.go(-1)
        }
    })
}
</script>

<style scoped>
@import '@/assets/Data/dataadmin.css';
</style>